<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>文章编写页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">
    <!--====== Summernote CSS ======-->
    <link rel="stylesheet" href="assets/css/summernote.css">
    <link rel="stylesheet" href="assets/css/summernote-bs4.min.css">
</head>
<body>
<!-- 导入页眉 -->
<!--<div class="header"></div>-->
<!--====== NAVBAR TWO PART START ======-->

<section class="navbar-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <nav class="navbar navbar-expand-lg">

                    <a class="navbar-brand" href="#">
                        <img src="assets/images/logo.svg" alt="Logo">
                    </a>

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTwo"
                            aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="toggler-icon"></span>
                        <span class="toggler-icon"></span>
                        <span class="toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                        <ul class="navbar-nav m-auto">
                            <li class="nav-item active"><a class="page-scroll" href="index2.html">首页 </a></li>
                            <li class="nav-item"><a class="page-scroll" href="blog.html">博客</a></li>
                            <li class="nav-item"><a class="page-scroll" href="#segment">分类</a></li>
                            <li class="nav-item"><a class="page-scroll" href="feedback.html">反馈</a></li>
                            <li class="nav-item"><a @click="login" class="page-scroll ">登录</a></li>
                            <li class="nav-item"><a @click="register" class="page-scroll ">注册</a></li>
                            <li class="nav-item"><a class="page-scroll" href="modify.html">个人中心</a></li>
                        </ul>
                    </div>

                    <div class="navbar-btn d-none d-sm-inline-block">
                        <form>
                            <button type="button" class="btn btn-primary" @click="signOut">
                                退出登录
                            </button>
                        </form>
                    </div>
                </nav> <!-- navbar -->
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

<!--====== NAVBAR TWO PART ENDS ======-->

<!--====== 自定义代码开始 ======-->
<section id="about" class="about-area" style="margin-top: 50px">
    <div class="container" id="vueVm">


        <!--====== 从这里开始 ======-->
        <!--        <div id="summernote"></div>-->
        <form>
            <div class="form-group">
                <label for="articleName"><h5>文章名：</h5></label>
                <input type="txt" class="form-control" id="articleName" name="articleName"
                       style="margin-bottom: 20px">
            </div>
            <div class="form-group">
                <label for="articleIntroduction"><h5>简介：</h5></label>
                <input type="txt" class="form-control" id="articleIntroduction" name="articleIntroduction"
                       style="margin-bottom: 20px">
            </div>
            <!--单选标签-->
            <!--            <div class="row" style="margin-bottom: 8px" id="tagSelectVm">
                            <div class="form-group col-sm-2">
                                <label for="tagSelect"><h5>选择标签：</h5></label>
                                <select class="form-control" id="tagSelect">
                                    <option :class='"btn-"+tag.tagType' v-for="tag in tagList">{{tag.tagName}}</option>
                                </select>
                            </div>
                        </div>-->
            <!--<form id="tagSelect" v-model="tagSelect">-->
                <h6>选择标签：</h6>
                <div class="form-check form-check-inline" v-for="tag in tagList">
                    <input class="form-check-input" type="checkbox" :id="tag.tagName" :value="tag.tagName"
                           :name="tag.tagName">
                    {{tag.tagName}}
                </div>
                <!--<button type="button" @click="show">test</button>-->
            <!--</form>-->
            <!--<div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="same-address">
                <label class="custom-control-label" for="same-address">政治</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="same-address2">
                <label class="custom-control-label" for="same-address2">疫情</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="same-address3">
                <label class="custom-control-label" for="same-address3">NBA</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="same-address4">
                <label class="custom-control-label" for="same-address4">娱乐</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="same-address5">
                <label class="custom-control-label" for="same-address5">IT技术</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="same-address6">
                <label class="custom-control-label" for="same-address6">散文</label>
            </div>-->
            <textarea id="summernote" name="summernote"></textarea>
            <div class="offset-10" style="margin-top: 20px">
                <button type="submit" class="btn btn-primary" style="margin-bottom: 10px"
                        onclick="creationSubmit(1)">发表
                </button>
                <!--<button type="submit" class="btn btn-primary" style="margin-bottom: 10px"
                        onclick="creationSubmit(0)">保存到草稿箱
                </button>-->
            </div>
        </form>

        <!--====== 从这里结束 ======-->

    </div> <!-- container -->
</section>
<!--====== 自定义代码结束 ======-->


<!-- 导入页脚 -->
<!--<div class="footer"></div>-->
<!--====== FOOTER PART START ======-->

<section class="footer-area footer-dark">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="footer-logo text-center">
                    <a class="mt-30" href="index2.html"><img src="assets/images/logo.svg" alt="Logo"></a>
                </div> <!-- footer logo -->
                <ul class="social text-center mt-60">
                    <li><a href="#"><i class="lni lni-facebook-filled"></i></a></li>
                    <li><a href="#"><i class="lni lni-twitter-original"></i></a></li>
                    <li><a href="#"><i class="lni lni-instagram-original"></i></a></li>
                    <li><a href="#"><i class="lni lni-linkedin-original"></i></a></li>
                </ul> <!-- social -->
                <div class="footer-support text-center">
                    <span class="number">+8801234567890</span>
                    <span class="mail">support@uideck.com</span>
                </div>
                <div class="copyright text-center mt-35">
                    <p class="text">Copyright &copy; 2020.Company name All rights reserved.</p>
                </div> <!--  copyright -->
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

<!--====== FOOTER PART ENDS ======-->
<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Scrolling Nav js ======-->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<!--====== Main js ======-->
<script src="assets/js/main.js"></script>
<!--====== Summernote js ======-->
<script src="assets/js/summernote.js"></script>
<script src="assets/js/summernote-bs4.min.js"></script>
<script src="assets/lang/summernote-zh-CN.min.js"></script>
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== HttpUtil js ======-->
<script src="assets/js/util/HttpUtil.js"></script>
</body>
</html>
<script>
    $(document).ready(function () {
    });
    var markupStr = $('#summernote').summernote({
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'hr', 'strikethrough', 'clear']],
            ['fontname', ['fontname', 'fontsize', 'fontsizeunit']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['color', ['color']],
            ['table', ['table']],
            ['demo', ['superscript', 'subscript', 'height', 'undo', 'redo']],
            ['insert', ['link', 'picture']],
            ['view', ['codeview', 'help']],
        ],
        lang: 'zh-CN',
        height: 500,
        minHeight: 300,
        maxHeight: 1000,
    });

    function creationSubmit(flag) {
        let url = "creation.do";
        let articleName = $("#articleName").val();
        let articleIntroduction = $("#articleIntroduction").val();
        // let tagSelect = $("#tagSelect").val();
        let articleFlag = flag;
        let str = markupStr.summernote('code');
        let params = {
            articleName: articleName,
            articleContain: str,
            articleIntroduction: articleIntroduction,
            articleFlag: articleFlag,
            // tagSelectName: tagSelect,
        };
        doPost(url, params, function callback() {
        });
        location.href = "modify.html"
    }

    var vm = new Vue({
        el: '#vueVm',
        data: {
            tagList: [],
            tagSelect: [],
        },
        methods: {
            getTags: function () {
                let thisObj = this;
                let url = "tag.do";
                doGet(url, function (resp) {
                    thisObj.tagList = resp;
                    console.log(thisObj.tagList)
                })
            },
            show: function () {
                let thisObj = this;
                console.log("show");
                console.log(thisObj.tagSelect)
            },
            login: function () {
                let url = "checkLogin.do";
                doGet(url, function (data) {
                    location.href = "login.html";
                })
            },
            register: function () {
                let url = "checkLogin.do";
                doGet(url, function (data) {
                    location.href = "register.html";
                })
            },
            signOut: function () {
                let url = "signOut.do";
                doGet(url, function (resp) {
                    if (resp == "yes") {
                        location.href = "login.html";
                    }
                })
            }
        },
        mounted: function () {
            this.getTags();
        }
    })
</script>


